<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Hearts</title>
            </f:facet>
        </h:head>

        <h:body>  
            <h:form  id="loginForm">
                <p:menubar styleClass="ui-widget">  
                    <f:facet name="options">  
                        <p:graphicImage value="/Resources/hearts_logo.png" style="height: 40px; position: absolute;margin-left: -60px; left:50%;"/>
                        <h:panelGrid columns="5" border="0" style="margin-right:10px" >
                            <p:inputText id="username" value="#{authorizationBean.username}"/>
                            <p:watermark for="username" value="Username" />

                            <p:password id="password" value="#{authorizationBean.password}"/>
                            <p:watermark for="password" value="Password" />

                            <p:commandButton type="submit" value="Login" action="#{authorizationBean.login}"/>
                        </h:panelGrid>
                    </f:facet>  
                </p:menubar>
                <p:messages for="loginForm" showDetail="true" autoUpdate="true" closable="true" />  
            </h:form>

            <p:separator />

           
            <p:commandLink id="createLink" value="Create user" update="createForm" onclick="dlg.show()" title="createUser" >
                <p:resetInput target="createForm" />  
            </p:commandLink>

            <p:dialog id="dialog" widgetVar="dlg" header="Create User" modal="true" showEffect="fade" hideEffect="fade"> 
                <h:form id="createForm">
                    <h:panelGrid columns="3" cellpadding="5" columnClasses="vtop,vtop">
                        <p:inputText id="createUsername" value="#{createUserBean.username}" required="true"/>
                        <p:watermark for="createUsername" value="Username" />
                        <p:message for="createUsername" display="icon"/>

                        <p:password id="createPassword" value="#{createUserBean.password}" required="true"/>
                        <p:watermark for="createPassword" value="Password" />
                        <p:message for="createPassword" display="icon"/>

                        <p:password id="createPasswordV" value="#{createUserBean.passwordVerify}" required="true"/>
                        <p:watermark for="createPasswordV" value="Password Verify" />
                        <p:message for="createPasswordV" display="icon"/>
                        
                        <f:facet name="footer">
                            <p:commandButton id="CreateButton" value="Create" update="createForm"
                                             action="#{createUserBean.createUser}"
                                             oncomplete="handleLoginRequest(xhr, status, args)"/>
                        </f:facet>
                    </h:panelGrid>
                    <p:messages id="createMessages" for="createForm" showDetail="true" autoUpdate="true" closable="false"/>
                </h:form>
            </p:dialog>

            <script type="text/javascript">
                function handleLoginRequest(xhr, status, args) {
                    if(args.validationFailed || !args.loggedIn) {
                        jQuery('#dialog').effect("shake", { times:3 }, 100);
                    }
                }
            </script>

        </h:body>
    </f:view>
</html>